<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>转盘抽奖</title>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./layui/css/layui.css">
    <script src="./js/js.js"></script>
    <script src="./js/jquery-1.9.1.min.js"></script>
    <script src="./layui/layui.js"></script>
    <script src="./jqueryrotate/jqueryrotate.js"></script>
</head>

<body>
    <div class="img3">
        <img class="services" src="./img/icon.png" alt="">
        <div class="report">
            <div class="tel">181****9695</div>
            <div>用户您好，欢迎参加**活动</div>
        </div>
        <div class="bg5">
            <div class="lunpanbox">
                <div class="left">
                    <div class="one">
                        <div class="onebox">
                            <div class="onetxt">感谢参与</div>
                            <img class="face" src="./img/smile.png" alt="">
                        </div>
                    </div>
                    <div class="two">
                        <div class="twobox">
                            <div class="twotxt">2G流量包</div>
                            <div class="icon_bg">
                                <div>2G流量</div>
                            </div>
                        </div>
                    </div>
                    <div class="three">
                        <div class="threebox">
                            <div class="threetxt">1G流量包</div>
                            <div class="icon_bg_1G">
                                <div>1G流量</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="right">
                    <div class="four">
                        <div class="fourbox">
                            <div class="fourtxt">1G流量包</div>
                            <div class="icon_bg_1G">
                                <div>1G流量</div>
                            </div>
                        </div>
                    </div>
                    <div class="five">
                        <div class="fivebox">
                            <div class="fivetxt">2G流量</div>
                            <div class="icon_bg">
                                <div>2G流量</div>
                            </div>
                        </div>
                    </div>
                    <div class="six">
                        <div class="sixbox">
                            <div class="sixtxt">感谢参与</div>
                            <img class="face" src="./img/smile.png" alt="">
                        </div>
                    </div>
                </div>
            </div>
            <img class="pointer" src="./img/pointer.png" alt="">
        </div>
        <div class="bg6">
            <div class="chancetitle">您当前剩余1次抽奖机会</div>
        </div>
        <!-- 登陆按钮 -->
        <div class="login">登陆</div>
        <!-- 我的中奖记录 -->
        <div class="giftbox">
            <img class="gift" src="./img/gift.png" alt="">
            <div class="giftword">我的中奖记录</div>
        </div>
    </div>
    <div class="rule_bg">
        <div class="rule_box">

            <div>1、完成*****活动可获得一次免费抽奖机会（每位手机用户仅可参与一次</div>
            <div>2、流量包会立即赠送至中奖号码账户，到账时会有短信提醒，如因欠费或网络原因等赠送失败，请您缴清欠费，请在有效期内领取并使用。</div>
            <div>3、使用宽带账号参与活动的用户，需在提交问卷前提供安徽电信号码，用于抽奖及后期奖品发放，
                如未提供，则无法获得抽奖机会，后期不再补送；如提供的手机号码已经参与抽奖也无法再次抽奖。
            </div>
            <div>4、流量包使用规则：</div>
            <div>(1)流量包发放成功当月生效，月底失效，不结转到次月；</div>
            <div>（2）此流量为套餐外流量，优先级低于套餐内流量以及普通流量包；</div>
            <div>（3）流量包仅限当前号码使用，主副卡不共享；</div>
            <div>（4）部分套餐，如个人定制、时长卡、日租卡、流量王、大鱼卡、小鱼卡、红包卡、随心卡、联名卡9元、iFree卡、互联网卡等套餐、
                未实名以及欠费用户无法兑换此流量或者兑换后无法使用。如您变更至以上套餐，
                变更后即使尚未生效也无法兑换或使用此流量；</div>
            <div>（5）该流量包非提速包，畅享套餐或畅享升级包达量限速后不可以通过该流量包用于提速。
                我司为保障消费者合法权益，对不法分子恶意套取活动利益的行为保留追诉的权利。</div>
        </div>

    </div>

    <!-- 登陆弹窗 -->
    <div class="dialog_login" style="display: none;">
        <div class="dialog">
            <img class="logintitle" src="./img/logintitle.png" alt="">
            <div class="input1box">
                <input class="input1" type="text" placeholder="请输入手机号">
                <img class="telicon" src="./img/tel.png" alt="">
            </div>
            <div class="input1box">
                <input class="input1" type="text" placeholder="请输入随机码">
                <img class="email" src="./img/duanxin.png" alt="">
                <div class="code">获取验证码</div>
            </div>
            <div class="go">确定</div>
        </div>
        <img class="close" src="./img/close.png" alt="">
    </div>

    <!-- 中奖弹窗 -->
    <div class="dialog_success" style="display: none;">
        <div class="success_bg">
            <div class="success_content">
                <div class="success_content_title">恭喜您抽中1G流量包! </div>
                <div class="confirm">确定</div>
            </div>
        </div>
        <img class="close" src="./img/close.png" alt="">
    </div>

    <!-- 未中奖弹窗 -->
    <div class="dialog_fail" style="display: none;">
        <div class="fail_bg">
            <div class="success_content">
                <div class="success_content_title">对不起，您未抽中奖品！ </div>
                <div class="confirm">确定</div>
            </div>
        </div>
        <img class="close" src="./img/close.png" alt="">
    </div>

    <!-- 中奖记录弹窗 -->
    <div class="dialog_record" style="display: none;">
        <div class="record_bg">
            <div class="bigbox">
                <div class="record_box">
                    <div class="recordtop">
                        <div>1G流量包</div>
                        <div>2021-10-21 23:59:59</div>
                    </div>
                    <div class="recordbtm" style="display: none;">已领取</div>
                    <div class="recordbtm_no">未领取</div>
                </div>
                <div class="record_box">
                    <div class="recordtop">
                        <div>1G流量包</div>
                        <div>2021-10-21 23:59:59</div>
                    </div>
                    <div class="recordbtm" style="display: none;">已领取</div>
                    <div class="recordbtm_no">未领取</div>
                </div>
                <div class="record_box">
                    <div class="recordtop">
                        <div>1G流量包</div>
                        <div>2021-10-21 23:59:59</div>
                    </div>
                    <div class="recordbtm" style="display: none;">已领取</div>
                    <div class="recordbtm_no">未领取</div>
                </div>

                <div class="record_box">
                    <div class="recordtop">
                        <div>1G流量包</div>
                        <div>2021-10-21 23:59:59</div>
                    </div>
                    <div class="recordbtm" style="display: none;">已领取</div>
                    <div class="recordbtm_no">未领取</div>
                </div>

            </div>

        </div>
        <img class="close" src="./img/close.png" alt="">
    </div>
</body>


<script>
    $(document).ready(function () {
        var isflag = true;
        $('.pointer').click(function () {
            if (isflag === true) {
                // 1-6
                var a = Math.floor(Math.random() * 6 + 1)
                if (a == 1) {
                    run(30)
                }
                else if (a == 2) {
                    run(90)
                }
                else if (a == 3) {
                    run(150)
                }
                else if (a == 4) {
                    run(210)
                }
                else if (a == 5) {
                    run(270)
                }
                else if (a == 6) {
                    run(330)
                }
            }
        });
        function run(i) {
            isflag = false
            $('.lunpanbox').rotate({
                angle: 0,
                animateTo: i + 3600,
                duration: 5000,
                callback: () => {
                    isflag = true
                    alert(i)
                },
            })
        }

        // layui.use(['layer'], function () {
        //     var layer = layui.layer

        layui.use(['layer'], function () {
            var layer = layui.layer

            // 登陆弹窗
            $('.login').click(function () {
                var index = layer.open({
                    type: 1,
                    content: $('.dialog_login'),
                    skin: 'layui-layer-nobg',
                    title: false,
                    closeBtn: 0,
                    shade: 0.5,
                    shadeClose: true
                });
            })

            //中奖弹窗
            $('.services').click(function () {
                layer.open({
                    type: 1,
                    content: $('.dialog_success'),
                    skin: 'layui-layer-nobg',
                    title: false,
                    closeBtn: 0,
                    shade: 0.5,
                    shadeClose: true
                });
            })

            // 未中奖弹窗
            $('.report').click(function () {
                layer.open({
                    type: 1,
                    content: $('.dialog_fail'),
                    skin: 'layui-layer-nobg',
                    title: false,
                    closeBtn: 0,
                    shade: 0.5,
                    shadeClose: true
                });
            })

            //中奖记录弹窗  
            $('.giftbox').click(function () {
                layer.open({
                    type: 1,
                    content: $('.dialog_record'),
                    skin: 'layui-layer-nobg',
                    title: false,
                    closeBtn: 0,
                    shade: 0.5,
                    shadeClose: true
                });
            })

            $('.close').click(function () {
                layer.closeAll();
            })
        })

    })
</script>

</html>